<template>
    <div class="charts-wrapper">
        <div ref="chartRef" class="chart" />
    </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

const chartRef = ref<HTMLDivElement | null>(null)

onMounted(() => {
    if (chartRef.value) {
        const chart = echarts.init(chartRef.value)
        chart.setOption({
            //   backgroundColor: '#0A2E5D',
            legend: {
                bottom: -5,
                itemWidth: 14,
                itemHeight: 14,
                textStyle: {
                    color: '#fff',
                    fontSize: 14,
                },
                data: ['已完成', '当班完成', '剩余孔数'],
            },
            title: {
                text: '100\n钻孔总数',
                left: '28%',
                top: '32%',
                textAlign: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: 14,
                    fontWeight: 'bold',
                    align: 'center',
                    lineHeight: 20,
                },
            },
            series: [
                {
                    name: '左侧环形图',
                    type: 'pie',
                    radius: ['40%', '60%'], // 更大
                    center: ['30%', '45%'],
                    label: {
                        show: true,
                        position: 'outside',
                        formatter: '{c}',
                        color: '#fff',
                        fontSize: 12,
                        overflow: 'break',
                    },
                    labelLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                            width: 1,
                        },
                        length: 4,
                        length2: 10,
                    },
                    data: [
                        { value: 60, name: '已完成', itemStyle: { color: '#49D69D' } },
                        { value: 40, name: '剩余孔数', itemStyle: { color: '#57A8FF' } },
                    ],
                },
                {
                    name: '右侧实心图',
                    type: 'pie',
                    radius: ['0%', '40%'], // 比左边小
                    center: ['75%', '40%'],
                    label: {
                        show: true,
                        position: 'outside',
                        formatter: '{c}',
                        color: '#fff',
                        fontSize: 12,
                    },
                    labelLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                            width: 1,
                        },
                        length: 4,
                        length2: 10,
                    },
                    data: [
                        { value: 45, name: '当班完成', itemStyle: { color: '#EBF07C' } },
                        { value: 60, name: '已完成', itemStyle: { color: '#49D69D' } },
                    ],
                },
            ],
        })
    }
})
</script>

<style scoped>
.charts-wrapper {
    /* background-color: #0A2E5D;
  padding: 20px; */
}

.chart {
    width: 100%;
    height: 180px;
}
</style>
